<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet" />
		<style type="text/css">
			table thead tr th {
				text-align: center;
			}
		</style>
		<script src="js/jquery-3.5.0.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<style>
		/***** 结合CSS样式一起使用 *****/
    [v-cloak] {
        display: none !important;
    }
</style>
	<body>
		<div id="app" v-cloak style="padding:20px;">
			<div id="index" class="panel panel-primary">
				<div class="panel-heading">
					搜索名字: <input type="text" id="name" name="name"> &nbsp;&nbsp;
					班级号:
					<select id="classid" name="classid">
						<option value="">请选择</option>
						<option v-for="item in clist" :value=item.classid>{{item.classname}}</option>
					</select>
					&nbsp;&nbsp;
					教师名:
					<select id="teacherid" name="teacherid">
						<option value="">请选择</option>
						<option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option>
					</select> &nbsp;&nbsp;
					<input type="button" @click.prevent="find()" value="搜索" id="find" name="find">&nbsp;&nbsp;
					<input type="button" @click.prevent="add()" value="添加" id="add" name="add">
				</div>
				<!--width="90%" border="1"-->
				<table class="table table-bordered table-striped text-center">
					<tr>
						<td>编号</td>
						<td>名字</td>
						<td>班级名</td>
						<td>教师名</td>
						<td>操作</td>
					</tr>
					<tr v-for="item in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.classname}}</td>
						<td>{{item.teachername}}</td>
						<td>
							<a href="#" @click.prevent="remove(item.id)">删除</a>&nbsp;
							<a href="#" @click.prevent="edit(item)">修改</a>&nbsp;
						</td>
					</tr>
				</table>
				<br>
				<div><a href="#" @click.prevent="homepage">首页</a>&nbsp;
					<a href="#" @click.prevent="uppage">上一页</a>
					当前页:{{pagebean.page}}&nbsp;
					最大页数:{{pagebean.maxPages}}&nbsp;
					<a href="#" @click.prevent="down">下一页</a>
					<a href="#" @click.prevent="lastpage">末页</a>&nbsp;&nbsp;&nbsp;
					<input type="number" style="width: 50px" id="pagex" min="1">&nbsp;<input type="button" @click.prevent="go()" value="跳转"
					 id="t">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<select id="limit" @change="changge()">
						<option>10</option>
						<option>20</option>
					</select>
				</div>
				<!--<template>-->
				<!--<v-pagination :total=pagebean.maxPages @page-change="pageChange1" @page-size-change="pageSizeChange1"></v-pagination>-->
				<!--</template>-->
				<input type="hidden" value="" id="page">
			</div>
			<!--编辑页面-->
			<div id="edit">
				<table class="table table-bordered table-striped text-center">
					<input type="hidden" id="hid">
					<tr>
						<td>姓名</td>
						<td><input type="text" name="ename" id="ename"></td>
					</tr>
					<tr>
						<td>班级</td>
						<td>
							<select id="eclassid" name="eclassid">
								<option value="">请选择</option>
								<option v-for="item in clist" :value=item.classid>{{item.classname}}</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>教师</td>
						<td>
							<select id="eteacherid" name="eteacherid">
								<option value="">请选择</option>
								<option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option>
							</select>
						</td>
					</tr>
					<tr>
						<td><input type="button" @click.prevent="confirm" value="确定"></td>
						<td><input type="button" @click.prevent="back" value="返回"></td>
					</tr>
				</table>
			</div>
		</div>
		<script>
			$('#edit').hide();
			//实例化vue
			var vm = new Vue({
				el: '#app',
				data: {
					list: find().list, //学生数据
					clist: class_bind(), //班级数据
					tlist: teacher_bind(), //教员信息
					pagebean: find().pagebean //分页信息
				},
				created() { //布置完之后执行的区域

				},
				methods: {
					find() { //查询
						this.list = find().list
						this.pagebean = find().pagebean
					},
					remove(id) { //删除
						if (confirm('确定删除吗?')) {
							remove(id);
							this.list = find().list
							this.pagebean = find().pagebean
						}

					},
					back() { //点击返回
						$('#index').show();
						$('#edit').hide();
						//该项目的所有ajax请求可以改成以下的axios请求
						// let params=new URLSearchParams();
						// params.append("limit","20");
						// params.append("name","张三");
						// axios.post('studentaction.action?methodName=find',params).then(function (value) {
						//     console.log(value.data);//value.data为返回的数据
						// })
					},
					edit(item) { //点击修改
						$('#index').hide();
						$('#edit').show();
						$('#hid').val(item.id);
						$('#ename').val(item.name);
						$('#eclassid').val(item.classid);
						$('#eteacherid').val(item.teacherid);
					},
					add() { //点击添加
						$('#index').hide();
						$('#edit').show();

					},
					confirm() { //确定按钮
						if ($('#hid').val() == "") { //为空则是添加
							add('add');
						} else {
							add('edit'); //修改
						}
						this.list = find().list
						this.pagebean = find().pagebean
					},
					homepage() { //点击首页
						$('#page').val(1);
						this.list = find().list
						this.pagebean = find().pagebean
					},
					uppage() { //上一页
						var up = $('#page').val() == 1 ? 1 : parseInt($('#page').val()) - 1;
						$('#page').val(up);
						this.list = find().list
						this.pagebean = find().pagebean
					},
					down() { //下一页
						var dowm = $('#page').val() == this.pagebean.maxPages ? this.pagebean.maxPages : parseInt($('#page').val()) + 1;
						$('#page').val(dowm);
						this.list = find().list
						this.pagebean = find().pagebean
					},
					lastpage() { //末页
						$('#page').val(this.pagebean.maxPages);
						this.list = find().list
						this.pagebean = find().pagebean
					},
					go() { //跳转
						if ($('#pagex').val() >= 0 && $('#pagex').val() <= this.pagebean.maxPages) {
							$('#page').val($('#pagex').val());
							this.list = find().list
							this.pagebean = find().pagebean
						} else {
							alert('请输入正确页数');
						}

					},
					changge() { //换数量的方法
						this.list = find().list
						this.pagebean = find().pagebean
					}
				}
			});

			/**
			 * 查询方法
			 * @returns {*}
			 */
			function find() {
				var data2;
				$.ajax({
					type: "post",
					url: "studentaction.action?methodName=find",
					dataType: "json",
					data: { //传给servlet的数据,
						name: $('#name').val(),
						classid: $('#classid').val(),
						teacherid: $('#teacherid').val(),
						page: $('#page').val(),
						limit: $('#limit').val(),
						d: new Date()
					},
					async: false, //加上这个ajax先执行
					success: function(data) {
						$('#page').val(data.pagebean.page);
						//返回处理的方法
						console.log(data);
						data2 = data;
					}
				});
				return data2;
			}

			/**
			 * 班级数据绑定
			 */
			function class_bind() {
				var data2;
				$.ajax({
					type: "post",
					url: "studentaction.action?methodName=cfind",
					dataType: "json",
					data: { //传给servlet的数据,
						d: new Date()
					},
					async: false, //加上这个ajax先执行
					success: function(data) {
						//返回处理的方法
						data2 = data;
					}
				});
				return data2;
			}

			/**
			 * 教员数据绑定
			 */
			function teacher_bind() {
				var data2;
				$.ajax({
					type: "post",
					url: "studentaction.action?methodName=tfind",
					dataType: "json",
					data: { //传给servlet的数据,
						d: new Date()
					},
					async: false, //加上这个ajax先执行
					success: function(data) {
						//返回处理的方法
						data2 = data;
					}
				});
				return data2;
			}

			/**
			 * 添加和修改
			 */
			function add(index) {
				var ur = "studentaction.action?methodName=add";
				if (index == 'edit') {
					ur = "studentaction.action?methodName=edit";
				}
				$.ajax({
					type: "post",
					url: ur,
					dataType: "json",
					data: { //传给servlet的数据,
						id: $('#hid').val(),
						name: $('#ename').val(),
						classid: $('#eclassid').val(),
						teacherid: $('#eteacherid').val(),
						d: new Date()
					},
					async: false, //加上这个ajax先执行
					success: function(data) {
						if (data) {
							alert('操作成功');
							$('#index').show();
							$('#edit').hide();
							$('#hid').val("");
							$('#ename').val("");
							$('#eclassid').val("");
							$('#eteacherid').val("");
						} else {
							alert('操作失败')
						}
					}
				});
			}
			/**
			 * 删除
			 */
			function remove(id) {
				$.ajax({
					type: "post",
					url: "studentaction.action?methodName=remove",
					dataType: "json",
					data: { //传给servlet的数据,
						id: id,
						d: new Date()
					},
					async: false, //加上这个ajax先执行
					success: function(data) {
						//返回处理的方法
						if (data) {
							alert('删除成功')
						} else {
							alert('删除失败');
						}
					}
				});
			}
		</script>
	</body>